<template>
	<view class="h-30 w-100 flex align-center justify-end" @click="showPopup">
		<text v-if="priceValue">{{ priceValue }} 元</text>
		<text v-else class="gray9">{{ data.placeholder }}</text>
		<uni-icons :size="16" color="#bbb" type="arrowright" class="pr-2" />
	</view>
	<uni-popup ref="popupRef" background-color="#fff">
		<view class="py-13 w-100 text-center text-16 relative">
			设置新客专享价
			<view @click="closePopup" class="absolute w-45 h-45 flex align-center justify-center" style="right: 0; top: 0;">
				<uni-icons type="closeempty" color="#c7c7c7" :size="24"></uni-icons>
			</view>
		</view>
		<view class="gray7 text-center pb-8 text-14">该价格仅限于门店的新客户使用</view>
		<view class="px-20 border-top mt-20">
			<uni-forms ref="formNewMemberPriceRef" :modelValue="myValue" validate-trigger="bind" label-width="200">
				<view class=" border-bottom py-8">
					<uni-forms-item label="价格" name="price" :rules="rules">
						<form-number v-model="myValue.price" :data="{ rightSlots: '元', placeholder: '请输入', min: 0.01, max: 999999, step: 0.01 }"></form-number>
					</uni-forms-item>
				</view>
				<view class="border-bottom py-8">
					<uni-forms-item label="与门店优惠券共同使用" name="switch1"><form-switch v-model="myValue.switch1" :data="{ onValue: 1, offValue: 0 }" /></uni-forms-item>
				</view>
				<view class="border-bottom py-8">
					<uni-forms-item label="与平台红包共同使用" name="switch2"><form-switch v-model="myValue.switch2" :data="{ onValue: 1, offValue: 0 }" /></uni-forms-item>
				</view>
			</uni-forms>
			<view class="pt-60 mt-60 pb-10">
				<my-button @click="submit" type="primary" shape="circle" :class="{ 'mb-10': isEmpty(priceValue) }" :disabled="isEmpty(myValue.price)">确认</my-button>
				<my-button @click="cancel" type="white" shape="circle" link :size="24" class="mt-10" v-if="!isEmpty(priceValue)">取消新客价</my-button>
			</view>
		</view>
	</uni-popup>
</template>

<script setup lang="ts">
import { watch, ref } from 'vue'
import { isEmpty } from '@/assets/js/utils'

const props = defineProps({
	//表单组件参数
	data: {
		type: Object,
		required: true
	},
	modelValue: {}
})

watch(props, (val: any, oldVal: any) => {
	init()
})

const init = () => {
	if (props.modelValue && Array.isArray(props.modelValue) && props.modelValue.length == 3) {
		priceValue.value = props.modelValue[0] / 100
		myValue.value.price = props.modelValue[0] / 100
		myValue.value.switch1 = props.modelValue[1]
		myValue.value.switch2 = props.modelValue[2]
	} else {
		myValue.value.price = ''
		myValue.value.switch1 = 0
		myValue.value.switch2 = 0
		priceValue.value = ''
	}
}

const priceValue = ref()
const myValue = <any>ref({
	price: '',
	switch1: 0,
	switch2: 0
})
//小数点后两位正则
let pattern = /(^[0-9]{1,100}$)|(^[0-9]{1,100}[\.]{1}[0-9]{1,2}$)/
const rules = ref([{ required: true, errorMessage: '请输入新客价' }, { pattern, trigger: 'blur', errorMessage: '输入价格不符合规范，小数点后最多2位' }])

const popupRef = ref()

//打开popup
const showPopup = () => {
	init()
	popupRef.value.open('bottom')
}
//关闭popup
const closePopup = () => {
	popupRef.value.close()
}
//取消新客价
const cancel = () => {
	myValue.value.price = ''
	myValue.value.switch1 = 0
	myValue.value.switch2 = 0
	priceValue.value = ''
	emit('update:modelValue', '')
	closePopup()
}

//修改双向绑定值
const emit = defineEmits(['update:modelValue'])
const formNewMemberPriceRef = ref()
const submit = () => {
	formNewMemberPriceRef.value
		.validate()
		.then(res => {
			priceValue.value = myValue.value.price
			emit('update:modelValue', [myValue.value.price * 100, myValue.value.switch1, myValue.value.switch2])
			closePopup()
		})
		.catch(err => {})
}
</script>
